/*
 * 组件注释
 * @Author: machinist_wq
 * @Date: 2022-07-01 15:17:57
 * @LastEditors: machinist_wq
 * @LastEditTime: 2022-12-29 21:04:48
 * @Description: 富文本编辑
 * // ? 需要public/ueditor/ueditor.config.js 
 * // ? 下配置后端接口路径（serverUrl字段）
 * 人生无常！大肠包小肠......
 */
"use strict";
import { useEffect, useRef, FC, ReactElement, forwardRef, useImperativeHandle, ForwardedRef } from "react";
import styles from "./index.less";

const toolbars = [
  [
    "undo", //撤销
    "redo", //重做
    "bold", //加粗
    "italic", //斜体
    "underline", //下划线
    "strikethrough", //删除线
    "subscript", //下标
    "superscript", //上标
    "source", //源代码
    "blockquote", //引用
    //'pasteplain', //纯文本粘贴模式
    "horizontal", //分隔线
    "removeformat", //清除格式
    "unlink", //取消链接
    "inserttitle", //插入标题
    // 'simpleupload', //单图上传
    "insertimage", //多图上传
    "link", //超链接
    //'emotion', //表情
    //'spechars', //特殊字符
    //'searchreplace', //查询替换
    //'map', //Baidu地图
    //'insertvideo', //视频
    "justifyleft", //居左对齐
    "justifyright", //居右对齐
    "justifycenter", //居中对齐
    "justifyjustify", //两端对齐
    //'fullscreen', //全屏
    "imagecenter", //居中
    "edittip ", //编辑提示
    //'customstyle', //自定义标题
    "background", //背景
    // 'scrawl', //涂鸦
    // 'music', //音乐
    "inserttable", //插入表格
    "drafts", // 从草稿箱加载
    //'charts', // 图表
    "fontfamily", //字体
    "fontsize", //字号
    //'insertcode', //代码语言
    "insertorderedlist", //有序列表
    "insertunorderedlist", //无序列表
    "lineheight", //行间距
    "rowspacingtop", //段前距
    "rowspacingbottom", //段后距
    "forecolor", //字体颜色
    "backcolor", //背景色
    //'preview', //预览
  ],
];
interface IProps {
  id: number | string | undefined;
  height: number | string | undefined;
  disabled: boolean;
  value: string;
  onChange?: any;
}

interface EditorRef {
  ready: any;
  setDisabled: any;
  setContent: any;
  getContent: any;
}

const Index: FC<IProps> = forwardRef((props: IProps, ref: ForwardedRef<unknown>): ReactElement => {
  const { id, value, height, onChange, disabled } = props;

  const editorRef = useRef<EditorRef | {}>({});

  const getContent = () => {
    return (editorRef.current! as EditorRef).getContent();
  };
  const setContent = (value: any) => {
    return (editorRef.current! as EditorRef).setContent(value);
  };

  useEffect(() => {
    // 防止二次刷新
    if (Object.keys(editorRef.current).length) return;
    // 这里为什么会走两遍的
    const UE = window.UE;

    console.log(editorRef.current);
    UE.getEditor = (id: any, opt: any) => {
      if (editorRef.current) {
        try {
          UE.delEditor(id);
        } catch (e) {
          // console.log(e);
        }
      }
      let editor = new UE.ui.Editor(opt);
      editor.render(id);
      return editor;
    };

    var ue = UE.getEditor(id, {
      initialFrameHeight: height || 300,
      // serverUrl: '/api/uefile/manage/action',
      toolbars: toolbars,
    });

    // 监听内容改变
    ue.addListener("selectionchange", () => {
      onChange && onChange(getContent())
    });

    editorRef.current = ue;
    (editorRef.current! as EditorRef).ready(() => {
      disabled && (editorRef.current! as EditorRef).setDisabled();
      editorRef.current && setContent(value);
    });
  }, []);

  useImperativeHandle(ref, () => ({
    editorRef,
    getContent,
    setContent
  }));
  return (
    <textarea
      className={styles.editorContent}
      id={id as string}
      name="blog"
      // type="text/plain"
      style={{ width: "100%", height: "100%" }}
    />
  );
});
export default Index;
